<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		.container {
			min-width: 1024px;
  			min-height: 768px;
  			margin: 0 auto;
  			overflow-y: scroll;
  		}
  		.header {
  			/* 
  				width: 100% 设定对象占父元素100%
  				width: auto 设定对象根据实际大小自适应宽度
  				两者不相同
  				
  			*/
  			width: 100%;
  			height: 20px;
  			border: 1px solid red;
  			background-color: gray;
  		}
  		.main {
  			width: 100%;
  			height: 90%;
  			border: 1px solid purple;
  			background-color: orange;
  		}
  		.footer {
  			position: fixed;
  			z-index: 1000;
  			margin: 0 auto;
  			bottom: 0;
  			left: 0;
  			width: 100%;
  			height: 40px;
  			background-color: #00b38a;
  			color: white;
  			text-align: center;
  			line-height: 40px;
  		}
  	</style>
  </head>
  
  <body>
  	<div class="contaner">
	  	<div class="header"></div>
	  	<div class="main"></div>
	  	<div class="footer">
	  		<span>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</span>
	  	</div>
  	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
        });
    </script>
  </body>
</html>